<script setup lang="ts">
import { onMounted } from 'vue';
import useUserStore from '@/stores/modules/user';
import { useDate } from '@/composables/useDate';

// 用户仓库
const userStore = useUserStore();

// 获取当前时间段
const { currentTime } = useDate();


// 获取用户信息
onMounted(() => {
    userStore.getUserInfo();
})
</script>
<template>
        <el-card>
            <el-row>
                <el-col :span="4">
                    <el-avatar :size="100" :src="userStore.userInfo.avatar" />
                </el-col>
                <div>
                    <h2>{{currentTime?.title}}好 ， {{ userStore.userInfo.name }}</h2>
                    <p>硅谷甄选运营平台</p>
                </div>
            </el-row>
        </el-card>
        
        <div style="text-align: center;"><svg-icon name="welcome" width="500"></svg-icon></div>
    
</template>



<style scoped lang="scss">
.el-row {
    display: flex;
    align-items: center;
    div {
        text-align: center;
        margin-left: 20px;
        h2 {
            font-size: 22px;
            margin-bottom: 10px;
            font-weight: 800;
        }
        p {
            font-style: italic;
            color: #999;
            font-size: 20px;
        }
    }
}
main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #f2f4f7;
    svg {
        width: 500px;
        height: 500px;
    }
}
</style>
<style lang="scss">
.el-card {
    margin-bottom: 20px;
}
</style>
<style lang="scss" scoped>
.el-col {
}
</style>